<template>
<div class="use-infinite-scroll">
  <div ref="el" class="list-container">
    <div v-for="item in list" :key="item">
      {{ item }}
    </div>
  </div>
  <div>
    <button @click="resetList">Reset List</button>
  </div>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useInfiniteScroll } from "@vueuse/core";

defineOptions({
  name: "UseInfiniteScroll"
})
const el = ref<HTMLElement | null>(null)
const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

const { reset } = useInfiniteScroll(el, () => {
  if (list.value.length > 100) {
    return
  }
  list.value.push(...Array.from({ length: 10 }, (_, i) => list.value.length + i + 1))
}, { distance: 30 })

const resetList = () => {
  list.value = []
  reset()
}
</script>

<style scoped lang="css">
.use-infinite-scroll {
  .list-container {
    height: 50vh;
    overflow-y: auto;
  }
}
</style>
